<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar
      title="购物车"
      fixed
      left-arrow
      @click-left="onClickLeft"
      right-text="管理"
      @click-right="onClickRight"
    />
    <!-- 购物车列表 -->
    <div class="order-list">
      <div class="goods-item" v-for="item in cartList" :key="item.goodsId">
        <div class="checkbox">
          <van-checkbox
            v-model="item.checked"
            @change="checkHandler(item)"
          ></van-checkbox>
        </div>
        <div class="img" @click="clickItem(item)">
          <img :src="item.imageUrl" alt="" />
        </div>
        <div class="detail">
          <h2 class="over-one" @click="clickItem(item)">{{ item.title }}</h2>
          <h3 @click="clickItem(item)">{{ item.introduce }}</h3>
          <div class="tag" @click="clickItem(item)">
            <template>
              <van-tag plain type="danger">{{ item.brandCountryName }}</van-tag>
              &nbsp;
              <van-tag plain type="danger">{{
                item.discountBenefitStr
              }}</van-tag>
            </template>
          </div>
          <div class="detail-bottom">
            <h3 class="price" @click="clickItem(item)">
              ￥{{ item.marketPrice }}
            </h3>
            <div class="step">
              <van-stepper v-model="item.num" @change="changenum(item)" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 全选 合计 -->
    <template v-if="show">
      <van-submit-bar
        :price="priceAll"
        button-text="结算"
        @submit="onSubmit"
        currency="¥"
      >
        <van-checkbox v-model="checkAll" @click="checkAllHandler"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </template>

    <!-- 删除购物车 -->
    <template v-else>
      <van-submit-bar button-text="删除" @submit="delSubmit">
        <van-checkbox v-model="checkAll" @click="checkAllHandler"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </template>
  </div>
</template>

<script>
import { getCartList, deleteCart } from "@/api/cart.js";
import {editGoodsList } from "@/api/goods.js";
import CartItem from "components/cart/CartItem";
import Vue from "vue";
import { NavBar, Toast, List, PullRefresh, SubmitBar, CellGroup } from "vant";
Vue.use(NavBar);
Vue.use(List);
Vue.use(PullRefresh);
Vue.use(SubmitBar);

import { Checkbox, CheckboxGroup, Tag, Stepper } from "vant";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Tag);
Vue.use(Stepper);

export default {
  data() {
    return {
      cartList: [],
      checkAll: false,
      checked: false,
      stepValue: "",
      show: true,
    };
  },
  components: {
    CartItem,
  },
  created() {
    this.getCartList();
  },

  computed: {
    //所选商品总价
    priceAll() {
      var totalprice = 0;
      this.cartList.forEach((item) => {
        if (item.checked === true) {
          totalprice += item.numtotal;
        }
      });
      return totalprice * 100;
    },
    // //所选商品总数
    // num() {
    //   var list = this.cartList.filter((item, index, arr) => {
    //     return item.checked === true;
    //   });
    //   return list.length;
    // },
  },
  methods: {
    //获取购物车数据
    async getCartList() {
      let rs = await getCartList({});
      this.cartList = rs.data.reverse();
      console.log(this.cartList);
    },

    onLoad() {},
    onRefresh() {},

    //购物车提交订单
    onSubmit() {
      let submitList = this.cartList.filter((item) => {
        return item.checked === true;
      });
      if (submitList.length === 0) {
        Toast("请选择订单");
        return;
      }
      let list = [];
      submitList.forEach((item) => {
        list.push(item.goodsId);
      });
      this.$router.push({
        path: "/confirmOrder",
        query: list,
      });
    },

    //全选
    checkAllHandler() {
      this.cartList.forEach((item) => {
        item.checked = this.checkAll;
      });
      this.checked = this.checkAll;
    },
    //单选
    checkHandler(val) {
      val.numtotal = val.num * val.marketPrice;
      this.checkAll = this.cartList.every((item) => {
        return item.checked === true;
      });
    },
    //修改数量
    async changenum(item) {
        console.log(item);
        await editGoodsList(item)
      item.numtotal = item.num * item.marketPrice;
    },
    //点击跳转到商品详情
    clickItem(item) {
      this.$router.push(`/goodsDetail/${item.goodsId}`);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.show = !this.show;
    },
    //删除购物车
    delSubmit() {
      this.cartList.forEach(async (item) => {
        if (item.checked) {
            console.log(0);
          await deleteCart(item.id);
          //把所选商品数量改为0
        //   item.num = 0
        //   await editGoodsList(item)
        }
      });
      
      this.getCartList();
      this.show = true;
    },
    checkAllDel() {},
  },
};
</script>

<style lang="stylus" scoped>
.order-list
    margin .5rem auto
.van-submit-bar
  bottom .49rem!important

 .goods-item
    height 1.5rem
    background #fafafa
    margin-bottom 0.1rem
    flex 1
    display flex
    align-items center
    justify-content center
    .checkbox
      width .2rem
      height 0.2rem
      text-align center
      margin 0 .1rem

    .img
      width .9rem
      height 1rem
      display flex
      align-items center
      img
        width .7rem
        height .8rem
    .detail
      flex 1
      margin-right .1rem
      h2
        font-weight normal
        font-size .14rem
        margin-bottom .04rem
      h3
        font-weight normal
        font-size .1rem
        margin-bottom .08rem
        color #aaa
      .tag
         margin-bottom .08rem
      .detail-bottom
        display flex
        align-items center
        justify-content space-between
        .price
          color red
          font-weight bold
          font-size .14rem
        .step span
          display inline-block
          margin 0 .05rem

.account{
    background #fff
}
.van-submit-bar__bar{
justify-content: space-between;
}
>>> .van-icon-arrow-left{
    color:#fb4a30
}
>>> .van-nav-bar__text{
    color:#fb4a30
}
>>> .van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: #fa3419;
    border-color: #fa4419;
}
</style>
